<template>
	<div class="a">
		<van-nav-bar
		  class="fix_header"	
		  title="我的资料"
		  left-arrow
		  @click-left="onClickLeft"
		>		
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>
	    </van-nav-bar>	
	    <div class="fix_next"></div>
         
         
        <div class="margin10">
        	<van-cell title="头像" is-link style="display: flex;align-items: center;" @click="changePhoto">
        		<div slot="default">
        			<img src="../../../../static/img/b.jpg" alt="" class="touxiang"/>
        		</div>
        	</van-cell>
        	<van-cell title="会员名" is-link  :value="value1"/>
        	<van-cell title="昵称"   :value="value2" is-link @click="showNickName=true"/>
        	<van-cell title="性别" is-link  :value="value3" @click="changeSex"/>
        	<van-cell title="常住" is-link :value="value4" @click="changeArea"/>
        	<van-cell title="生日" is-link  :value="value5" @click="changeTime"/>
        	<van-cell title="简介" is-link  @click="showBrief=true"/>
        	<van-cell title="喜欢的" is-link  @click="showLove"/>        	
        </div> 
        
        
        <!--填写简介-->
		<van-popup
		  v-model="showBrief"
		  position="right"
		  :style="{ height: '100%',width:'100%'}"
		>   
			<van-nav-bar
			  title="简介"
			  left-arrow			  
			>		
			  <van-icon name="arrow-left" @click="showBrief=false" slot="left" color="#000" size="20"/>	       
		    </van-nav-bar>
			<van-field
			  v-model="briefMessage"
			  rows="5"
			  autosize
			  type="textarea"
			  maxlength="150"
			  placeholder="介绍下自己,让更多人了解你吧..."
			  show-word-limit
			  label-width='0'
			/>		    
		    
		    <div class="briefFoot">
		    	<van-button block color="#FFD630">保存</van-button>
		    </div>
		</van-popup>
		
        <!--填写昵称-->
		<van-popup
		  v-model="showNickName"
		  position="right"
		  :style="{ height: '100%',width:'100%'}"
		>   
		    <!--头部-->
			<van-nav-bar
			  title="编辑昵称"
			  left-arrow			  
			>		
			  <van-icon name="arrow-left" @click="showNickName=false" slot="left" color="#000" size="20"/>	       
		    </van-nav-bar>		
			<van-field
			  v-model="briefMessage"
			  rows="2"
			  autosize
			  type="textarea"
			  maxlength="25"
			  placeholder="请输入昵称"
			  show-word-limit
			  label-width='0'
			/>		    
		    
		    <div class="briefFoot">
		    	<van-button block color="#FFD630">保存</van-button>
		    </div>		    
		</van-popup>		
		
		
        <!--选择男女-->
        <van-popup v-model="showSex">
        	<div class="sexPopup">
                <div class="sexRadio" style="border-bottom: 1px #e5e5e5 solid;"  @click="selectSex(1)">男</div>
                <div class="sexRadio" @click="selectSex(2)">女</div>
        	</div>
        </van-popup>        
        <!--选择生日-->
		<van-popup
		  v-model="showTime"
		  position="bottom"
		>
			<van-datetime-picker	
			  :show-toolbar="false"		
			  v-model="currentDate"
			  type="date"
			  @change="getValue5"
			  :min-date="minDate"
			  :max-date="maxDate"
			  ref="datetimePicker"
			/>		 
			<div class="btnWrap">
				<span class="active" @click="cancelTime">取消</span>
				<span @click="confirmTime">确认</span>
			</div>
		</van-popup>
		<!--选择地区-->
        <van-popup
           v-model="showArea"
           position="bottom"
        >
           <van-area :area-list="areaList" @cancel="showArea=false" @confirm="confirmArea"/>                
        </van-popup>		
		
	</div>	
</template>

<script>
import areaList from '@/api/area.js'
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	name:'myInfo',
	data() {
       return {
       	  showBrief:false,
       	  showNickName:false,
       	  briefMessage:'',
       	  sex:'1',
          value1:'会员名',
          value2:'昵称',
          value3:'男',
          value4:'江苏 无锡',
          value5:'1994-10-01',
          middleValue5:'1994-10-01',
          showTime:false,
	      minDate: new Date(1900, 0, 1),
	      maxDate: new Date(),
	      currentDate: new Date(1989, 7, 8),
	      showArea:false,
	      areaList:areaList,  
	      showSex:false
       }
	},
	methods: {
		showLove(){
			alert('暂未开发此功能')
		},
		selectSex(num){
			// console.log(num)
		},
		changeSex(){
			this.showSex=true
		},
		changeArea(){
			this.showArea=true
		},
		confirmArea(res){
			// console.log(res)
		},
		// 打开选择生日控件
		changeTime(){
			this.showTime=true
		},
		// 取消选择生日操作
		cancelTime(){
			this.showTime=false
		},
		// 确认生日
		confirmTime(){
			this.showTime=false
			alert(this.middleValue5)
		},
		// 改变的时候记录值
		getValue5(res){		
			let arr=res.getValues()
			this.middleValue5=arr[0]+'-'+arr[1]+'-'+arr[2]
		},
		// 选择头像
		changePhoto(){
			alert('H5无法支持这一功能，请联系原生')
		}
	},
	mixins:[publicFun],//混入		
	mounted() {

	}
}	
</script>

<style scoped lang="scss">
.a{background: #f8f8f8;min-height: 100%;width: 100%;position: absolute;}
.a *{box-sizing: border-box;}	
.margin10{margin: 10px 0;}
.footer{background: #fff;position: absolute;bottom: 0;left: 0;width: 100%;}
.clear{padding: 15px;font-size: 13px;color: #333;}
.out{padding: 10px 30px 20px}
.touxiang{width: 50px;height: 50px;border-radius: 10px;}
.btnWrap{display: flex;
    span.active{border-right: 1px solid #efefef;};    
    span{flex: 1;padding: 15px 0;text-align: center;font-size: 15px;}
}
.sexPopup{width: 300px;background: #fff;}
.sexRadio{padding: 15px;color: #333;font-size: 15px;}
.briefFoot{padding: 20px 37.5px;position: absolute;bottom: 0;left: 0;width: 100%;}
</style>